<!-- 商品列表组件 <good-list :list="xx"></good-list> -->
<template>
	<view class="dragList">
		<view :id="'good' + good.prescriptionId" class="list" v-for="(good, index) in list" :key="index"
			@click="linkTo(good)">
			<view class="status" :class="'status' + good.orderStatus">{{ orderStatusLabel(good.orderStatus) }}</view>
			<view class="listInfo flex">
				<view class="name">单号</view>
				<view>{{ good.prescriptionId }}</view>
			</view>
			<view class="listInfo flex">
				<view class="name">就诊于</view>
				<view>{{ good.hospitalName }}</view>
			</view>
			<view class="listInfo flex">
				<view class="name">开具时间</view>
				<!-- <view>{{good.createdAt}}</view> -->
				<view>{{ moment(good.creatAt) }}</view>
			</view>
			<view class="listInfo drugsInfo" v-for="(items, indexs) in good.prescriptionDetails" :key="indexs">
				<view>{{ items.drugGenericName }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import dict from '@/static/js/dict.json'
import moment from '@/static/js/moment'
export default {
	props: {
		list: {
			type: Array,
			default() {
				return []
			}
		}
	},
	methods: {
		moment(val) {
			return moment(val).format('YYYY-MM-DD HH:mm:ss')
		},
		statusLabel(val) {
			return dict.statusList.filter(item => {
				return val == item.id
			})[0].title
		},
		orderStatusLabel(val) {
			return dict.orderStatusList.filter(item => {
				return val == item.id
			})[0].title
		},
		// 跳转到处方详情
		linkTo(val) {
			uni.navigateTo({
				url: `/pages/prescription/prescription?prescriptionId=${val.prescriptionId}&chufangInfo=${JSON.stringify(val)}`,
				success: res => { },
				fail: () => { },
				complete: () => { },
			})
		},
	}
}
</script>

<style lang="scss">
.dragList {
	width: 100%;
	padding: 0 30rpx 0;
	flex: 1;
	overflow: auto;
	box-sizing: border-box;

	.list {
		padding: 24rpx 24rpx 20rpx 24rpx;
		width: 100%;
		margin-bottom: 40rpx;
		background: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
		box-shadow: 2px 2px 10px rgba($color: #000000, $alpha: 0.2);
		position: relative;

		.status {
			position: absolute;
			right: 0rpx;
			top: 26rpx;
			font-size: 26rpx;
			color: #000;
			padding: 10rpx 20rpx 10rpx 36rpx;
			border-radius: 30rpx 0 0 30rpx;
		}

		.listInfo {
			justify-content: start;
			padding: 18rpx;
			color: #333333;
			font-weight: 500;
			font-size: 28rpx;

			.name {
				font-size: 28rpx;
				width: 140rpx;
				font-weight: 400;
				color: #777777;
			}
		}

		.drugsInfo {
			background: #F1F8FE;
			padding: 24rpx;
			border-radius: 10rpx;
			width: 100%;
			box-sizing: border-box;
			font-size: 28rpx;
			font-weight: 400;
			margin-bottom: 20rpx;
		}
	}
}
</style>
